/**
 * Created by sunguodong on 2021/12/22.
 * Email: sungd@tongtech.com
 * Description: ArGIS 创建多个地图
 */

import './index.less';
import React, {useEffect} from "react";
import * as esriLoader from 'esri-loader';
const options = {   
    url: 'https://js.arcgis.com/3.39/',
}
esriLoader.loadScript(options);

export const CreateTwoMap: React.FC = () => {

    let esriMap1: any;
    let esriMap2: any;

    function componentDid() {

        esriLoader.loadModules([
        'esri/map',
        ]).then(([Map]) => {
            esriMap1 = new Map('viewDiv1', {
                basemap: 'topo-vector',
                center: [103.723501, 36.09882],
                zoom: 12
            });
            esriMap2 = new Map('viewDiv2', {
                basemap: 'satellite',
                center: [103.723501, 36.09882],
                zoom: 12
            });
        }).catch(err => {
            console.error(err)
        });

    }

    useEffect(() => {
        return componentDid();
    }, []);

    function componentWillUn() {

    }

    useEffect(() => () => {
        return componentWillUn();
    }, []);

    return (<div style={{display: 'flex'}}>
        <div id='viewDiv1'></div>
        <div id='viewDiv2'></div>
    </div>)

}
